<template>
  <div class="Header-container">
    <!--顶部栏-->
    <div class="header">
      <div class="header-box clearfix">
        <img src="../../assets/header.png" width="100%" alt="" />
      </div>
    </div>
    <!-- 递归菜单栏 -->
    <el-menu class="common-menu" mode="horizontal" menu-trigger="click">
      <el-submenu index="1">
        <template slot="title">数据</template>
        <router-link :to="{ path: '/qys' }">
          <el-menu-item index="1-1">数据</el-menu-item>
        </router-link>
        <router-link :to="{ path: '/selectinstrument' }">
          <el-menu-item index="1-2">仪器列表</el-menu-item>
        </router-link>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title">状态</template>
        <el-submenu index="2-1">
          <template slot="title">仪器状态</template>
          <el-menu-item index="2-1-1">电池电压</el-menu-item>
          <el-menu-item index="2-1-2">激励电压</el-menu-item>
          <el-menu-item index="2-1-3">当前配谐值</el-menu-item>
          <el-menu-item index="2-1-4">信号质量</el-menu-item>
        </el-submenu>
        <el-submenu index="2-2">
          <template slot="title">网络状态</template>
          <el-menu-item index="2-2-1">网络拥堵情况</el-menu-item>
          <el-menu-item index="2-2-2">累计丢包数</el-menu-item>
          <el-menu-item index="2-2-3">上一次通信成功时间</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-submenu index="3">
        <template slot="title">设置</template>
        <el-menu-item index="3-1">采集量</el-menu-item>
        <el-menu-item index="3-2">采样率</el-menu-item>
        <el-menu-item index="3-3">总场配谐值1</el-menu-item>
        <el-menu-item index="3-4">总场配谐值2</el-menu-item>
      </el-submenu>
      <el-submenu index="4">
        <template slot="title">账号</template>
        <el-menu-item index="4-1">个人中心</el-menu-item>
        <el-menu-item index="4-2" @click="logout">注销</el-menu-item>
      </el-submenu>
      <el-submenu index="5">
        <template slot="title">自检</template>
        <el-menu-item index="5-1">仪器自检</el-menu-item>
        <el-menu-item index="5-2">通信自检</el-menu-item>
      </el-submenu>
      <el-submenu index="6">
        <template slot="title">帮助</template>
        <el-menu-item index="6-1">说明文档</el-menu-item>
        <el-menu-item index="6-2">版本信息</el-menu-item>
        <el-menu-item index="6-3">开发者</el-menu-item>
      </el-submenu>
      <el-menu-item index="7">关于</el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: 'CommonHeader',
  props: {
    msg: String
  },
  methods: {
    // 退出原理： 只需要销毁本地 token 即可，这样后续的请求就不会携带 token；
    // 必须重新登录一个 新的 token 才能正常访问
    logout() {
      window.sessionStorage.clear()
      this.$router.push('/login')
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* ul {
  list-style-type: none;
  padding: 0;
} */
/* 增加距离会导致在移动端时页面图片有10px的间距 */
/* li { */
/* display: inline-block; */
/* margin: 0 10px; */
/* } */
</style>
